<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表 </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 白色内容区 -->
        <div class="page_content">
            <div class="flex">
                <div class="input_box">
                    <el-input v-model="searchParams.query" placeholder="搜索关键字" class="input-with-select">
                        <template #append>
                            <el-button @click="searchList"><el-icon>
                                    <Search />
                                </el-icon></el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <!-- 表格 data:要展示的数据，stripe:隔行变色,scope.row:当前行数据 -->
            <el-table :data="goodsList" stripe style="width: 100%">
                <el-table-column prop="goods_name" label="商品名" width="180" />
                <el-table-column prop="goods_price" label="价格(￥)" width="180" />
                <el-table-column prop="goods_weight" label="重量(kg)" />
                <el-table-column prop="goods_state" label="商品状态"><!-- mg_state  状态 -->
                    <template #default="scope">
                        <p>{{switchState(scope.row.goods_state)}}</p>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, sizes,next, jumper, ->, total" :total="total"
                v-model:currentPage="searchParams.pagenum" v-model:page-size="searchParams.pagesize"
                :page-sizes="[2, 3, 5, 6]" @size-change="searchList" @current-change="searchList" />

        </div>
    </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { goodsListApi } from "@/util/request";

export default {
    name: "goods",
    setup() {
        const data = reactive({
            searchParams: {
                query: '',//搜索关键字
                pagesize: 5,
                pagenum: 1 // 当前页码
            },
            total: 0,
            goodsList: []
        });
        const searchList = () => {
            goodsListApi(data.searchParams).then(res => {//请求接口
                if (res.data) {
                    console.log("用户列表数据", res);
                    data.goodsList = res.data.goods;
                    data.total = res.data.total;
                }
            });
        };

        const switchState = state => {
            switch (state) {
                case 0:
                    return"未通过"
                    break;
                case 1:
                    return"审核中"
                    break;
                case 2:
                    return"已审核"
                    break;
            }
        }
        //方法初始化
        searchList();
        return {
            ...toRefs(data),
            searchList,
            switchState

        };
    }
}
</script>
